<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<form class="page__box form gv-alert" [formGroup]="alertForm" (ngSubmit)="addAlert()">
  <div *ngIf="isCreationMode" class="page__box-title">
    <h3 class="title">{{ 'application.alerts.add.title' | translate }}</h3>
    <gv-button link (:gv-button:click)="reset()">{{ 'application.alerts.add.reset' | translate }}</gv-button>
  </div>

  <div [ngClass]="isCreationMode ? 'page__box-content' : isEditionMode ? 'page__box-content-edit' : ''">
    <div class="gv-alert__row">
      <div class="gv-alert__row__content" [ngClass]="{ 'gv-alert__disabled': isReadingMode && !isAlertEnabled }">
        <div class="gv-alert__row__content__on">
          {{ 'application.alerts.phrase.on' | translate }}
          <gv-select
            class="gv-alert__row__content__on__api-select"
            *ngIf="isCreationMode || isEditionMode"
            [options]="apisOptions"
            formControlName="api"
            name="api"
            ngDefaultControl
          ></gv-select>
          <strong *ngIf="isReadingMode"> {{ apiLabel }} </strong>
        </div>
        <div class="gv-alert__row__content__when">
          {{ 'application.alerts.phrase.when' | translate }}
          <gv-select
            *ngIf="isCreationMode || isEditionMode"
            class="gv-alert__row__content__when__type-select"
            (:gv-select:select)="onTypeChange($event.detail)"
            placeholder="{{ 'application.alerts.add.type.placeholder' | translate }}"
            [options]="types"
            [disabled]="isEditionMode"
            formControlName="type"
            name="type"
            required="true"
            ngDefaultControl
          ></gv-select>

          <strong *ngIf="isReadingMode"> {{ typeLabel }} </strong>

          <ng-container *ngIf="isStatusAlert">
            <gv-select
              class="gv-alert__row__content__when__status-select"
              *ngIf="isCreationMode || isEditionMode"
              placeholder="{{ 'application.alerts.add.type.status.http_status.placeholder' | translate }}"
              [options]="httpStatus"
              formControlName="status"
              name="status"
              ngDefaultControl
            ></gv-select>

            <strong *ngIf="isReadingMode"> {{ getHttpStatusLabel(alert['status_code']) }} </strong>
            {{ 'application.alerts.phrase.status.second' | translate }}
            <gv-input
              class="gv-alert__row__content__when__status-percent-input"
              *ngIf="isCreationMode || isEditionMode"
              type="number"
              min="1"
              max="100"
              formControlName="threshold"
              required="true"
              name="threshold"
              placeholder="{{ 'application.alerts.add.type.status.percent.placeholder' | translate }}"
              ngDefaultControl
            ></gv-input>
            <strong *ngIf="isReadingMode"> {{ alert['status_percent'] }} </strong>
            {{ 'application.alerts.phrase.status.third' | translate }}
          </ng-container>

          <ng-container class="gv-alert__phrase" *ngIf="isResponseTimeAlert">
            {{ 'application.alerts.phrase.response_time.second' | translate }}
            <gv-input
              class="gv-alert__row__content__when__response-time-input"
              *ngIf="isCreationMode || isEditionMode"
              type="number"
              min="1"
              max="100_000"
              formControlName="responseTime"
              name="responseTime"
              required="true"
              placeholder="{{ 'application.alerts.add.type.status.percent.placeholder' | translate }}"
              ngDefaultControl
            ></gv-input>
            <strong *ngIf="isReadingMode"> {{ alert['response_time'] }} </strong>
            {{ 'application.alerts.phrase.response_time.third' | translate }}
          </ng-container>

          {{ 'application.alerts.phrase.last' | translate }}
          <gv-select
            class="gv-alert__row__content__when__duration-select"
            *ngIf="isCreationMode || isEditionMode"
            [options]="durations"
            formControlName="duration"
            name="duration"
            ngDefaultControl
          ></gv-select>
          <strong *ngIf="isReadingMode"> {{ alert.duration }} </strong>
          <gv-select
            class="gv-alert__row__content__when__time-unit-select"
            *ngIf="isCreationMode || isEditionMode"
            [options]="timeUnits"
            formControlName="timeUnit"
            name="timeUnit"
            ngDefaultControl
          ></gv-select>
          <strong *ngIf="isReadingMode"> {{ timeUnitTranslated() }} </strong>
        </div>
        <div class="gv-alert__row__content__description">
          <span class="gv-alert__row__content__description__text" *ngIf="isReadingMode && alert['description']">{{
            alert['description']
          }}</span>
          <gv-text
            *ngIf="isCreationMode || isEditionMode"
            ngDefaultControl
            class="gv-alert__row__content__description__input"
            formControlName="description"
            name="description"
            rows="3"
            maxlength="256"
            [label]="'application.alerts.add.description.label' | translate"
            [placeholder]="'application.alerts.add.description.placeholder' | translate"
          ></gv-text>
        </div>
        <div class="gv-alert__row__content__webhook">
          <span *ngIf="isReadingMode && isWebhookNotifierEnabled && alert.webhook"
            >{{ 'application.alerts.webhook.switch.label' | translate }} : {{ alert.webhook.httpMethod }} {{ alert.webhook.url }}</span
          >
          <gv-switch
            *ngIf="isEditionMode || isCreationMode"
            class="gv-alert__row__content__switch"
            label="{{ 'application.alerts.webhook.switch.label' | translate }}"
            title="{{ 'application.alerts.webhook.switch.title' | translate }}"
            formControlName="hasWebhook"
            name="hasWebhook"
            (:gv-switch:input)="toggleWebhook($event)"
            ngDefaultControl
          >
          </gv-switch>
          <ng-container *ngIf="(isCreationMode || isEditionMode) && isWebhookNotifierEnabled && alertForm.controls.hasWebhook.value">
            <gv-select
              class="gv-alert__row__content__webhook__method"
              title="{{ 'application.alerts.webhook.method.title' | translate }}"
              formControlName="webhookMethod"
              name="webhookMethod"
              [options]="webhookHttpMethods"
              ngDefaultControl
            ></gv-select>
            <gv-input
              class="gv-alert__row__content__webhook__url"
              title="{{ 'application.alerts.webhook.url.title' | translate }}"
              placeholder="{{ 'application.alerts.webhook.url.placeholder' | translate }}"
              formControlName="webhookUrl"
              name="webhookUrl"
              type="url"
              ngDefaultControl
            >
            </gv-input>
          </ng-container>
          <div *ngIf="alertForm.controls.hasWebhook.value && !isWebhookNotifierEnabled">
            <gv-message type="warning">
              {{ 'application.alerts.webhook.notifierWarning' | translate }}
            </gv-message>
          </div>
        </div>
      </div>
      <div *ngIf="isReadingMode">
        <gv-button
          [disabled]="!hasUpdatePermission() || !isAlertingEnabled"
          icon="general:rename"
          link="true"
          (:gv-button:click)="edit()"
        ></gv-button>
        <gv-button
          [disabled]="!hasDeletePermission() || !isAlertingEnabled"
          icon="general:trash"
          link="true"
          (:gv-button:click)="delete()"
        ></gv-button>
      </div>
      <div *ngIf="isEditionMode">
        <gv-button icon="general:close" link="true" (:gv-button:click)="cancelEdition()"></gv-button>
        <gv-button icon="code:check" link="true" [disabled]="alertForm.invalid" (:gv-button:click)="update()"></gv-button>
      </div>
    </div>

    <div *ngIf="isCreationMode" class="form__actions">
      <gv-button [disabled]="alertForm.invalid || !hasCreatePermission() || !isAlertingEnabled || maxReached" type="submit" primary>{{
        'application.alerts.add.title' | translate
      }}</gv-button>
    </div>
  </div>
</form>
